<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>注册页面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
	@IMPORT url("css/base.css");
	 #register{
	width:1340px;
	height:1400px;
	margin-top: 5px;
	}
	#register-left{
	width:180px;
	height:100%;
	float: left;
	}
	#register-center{
	width:980px;
	height:100%;
	float:left;
	border-left: 1px #eaebed solid;
	}
	#register-right{
	width:180px;
	height:100%;
	float:left;
	}
	
	.center-body-left{
	width:700px;
	height:100%;
	float:left;
	}
	.center-body-right{
	width:280px;
	height:100%;
	float:left;
	}
	 .gps {
		
		display: block;
		padding: 5px 5px;
		font-size: 14px;
		background: linear-gradient(to right, #eee, #FEFFFE);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: "microsoft yahei";
		margin-bottom: 10px;
		border-radius: 20px;
	}
	.gps a,
	.gps span {
		font-size: 14px;
		float: left;
		padding: 0 5px;
		color: #000000;
		max-width: 250px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.gps img {
		float: left;
		width: 19px;
		height: 19px;
	} 
	 .input{
	width:100%;
	height:450px;
	margin-top: 20px;
	}
	.input-case{
	width:400px;
	height:420px;
	margin:30px 150px;
	border: 2px #fff solid;
	}
	.yonghu{
	width:100%;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:20px;
	color:#437ad7;
	}
	.input-sex{
	width:300px;
	height:40px;
	margin-left: 12px;
	margin-top: 5px;
	}
	.input-text input{
	width:300px;
	height：40px;
	margin-top: 5px;
	margin-left: 10px;
	border: 1px #999999 solid;
	}
	.input-text-left{
	margin-top:5px;
	margin-left:3px;
	width:85px;
	height:40px;
	float:left;
	}
	
	.input-text-left a{
	height:40px;
	line-height: 40px;
	}
	
	.input-text-center{
	margin-top:5px;
	width:300px;
	height:40px;
	float: left;
	}
	.input-text-center input{
	margin-top: 0px;
	margin-left: 0px;
	}
	/* .input-text-right{
	width:100px;
	height:40px;
	float: right;
	background-color:#3881f0;
	} */
	
	.authcode_img b{
	width:20px;
	height:40px;
	display:block;
	float: right;
	font-size:25px;
	}
	
	.left{
	width:200px;
	height:100%;
	float: left;
	}
	.right{
	width:100px;
	height:100%;
	float: right;
	background-color:#3881f0;
	}
	
	.authcode_img b{
	width:20px;
	height:40px;
	display:block;
	float: right;
	font-size:25px;
	}
	
	</style>
	
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	
	<script type="text/javascript">
	
	function getAuthCode(){
		var authcode = "";
		var fontStyle = new Array("微软雅黑","Courier New","幼圆","宋体","Dotum","楷书","华文行楷");
		var colors = new Array("#1212c9","#c9b612","#12c930","#c912b1","#12c9c7","#c91f12","#fe7f02");
		var n = 4;
		for(var i=0;i<n;i++){
			var num = parseInt(Math.random()*10);
			authcode += num;
			$(".authcode_img .code"+(i+1)+"").html(num);
			var maxJ = 1;
			for(var j=0;j<maxJ;j++){
				var fontIndex = parseInt(Math.random()*10);
				var colorIndex = parseInt(Math.random()*10);
				if(fontIndex<fontStyle.length&&colorIndex<colors.length){
					$(".authcode_img .code"+(i+1)+"").css("font-family",fontStyle[fontIndex]).css("color",colors[colorIndex]);
				}else{
					maxJ++;
				}
			}
		}
		return authcode;
	}
	$(function(){
		var authcode = getAuthCode();
		$("#authcode").val(authcode);
		$(".authcode_img").click(function(){
			authcode = getAuthCode();
			$("#authcode").val(authcode);
			$("#check_authcode").val("");
		});

	});
	</script>
  </head>
  
  <body>
   <div id="top">
   	<jsp:include page="../../WEB-INF/includes/top.inc.jsp"></jsp:include>
   </div>
   <div id="register">
   			<div id="register-left"></div>
   			
   			<div id="register-center">
   				<div class="center-top">
    					<b>论坛信息：</b>会员 <span>221</span> 人&nbsp;&nbsp; 帖子
					<span>179</span> 篇 &nbsp;&nbsp;&nbsp;&nbsp;
					<b>站长寄语：</b>梦虽然遥不可及，但并不是不可能实现；只要坚持，就会离梦越来越近！
    				</div>
   			<div class="center-body">
   			
   				<div class="center-body-left">
   					 
   					 <div class="gps">
							<span>您的位置：</span>
							<img alt="首页" src="images/home.png">
							<a href="jsp/public/first.jsp" style="padding-left: 0px;">首页</a>
							<span>&raquo;</span><span>注册</span>
							<div class="clear"></div> 
							</div>
							
					<div class="input">
						<div class="input-case">
							<form action="InfoServlet" method="post">
								<div class="yonghu">
										用户注册
								</div>
								<div class="input-text"><a style="font-size: 16px;margin-left: 16px;">用户名&nbsp;:</a><input name="name" type="text" style="width:300px;height:40px;margin-left: 14px;" placeholder="3-15位数字、英文或下划线"/></div>
								<div class="input-text"><a style="font-size: 16px;margin-left: 31px;">性别&nbsp;:</a>
									<select class="input-sex" name="sex">
  									<option value="男" selected="selected">男</option>
  									<option value="女">女</option>
  								</select>
								</div>
								<div class="input-text"><a style="font-size: 16px;margin-left: 31px;">邮箱&nbsp;:</a><input name="email" type="text" style="width:300px;height:40px;margin-left: 14px;" placeholder="请填写正确邮箱,用于找回密码"/></div>
								<div class="input-text"><a style="font-size: 16px;margin-left: 31px;">密码&nbsp;:</a><input  name="password" type="password" style="width:300px;height:40px;margin-left: 14px;" placeholder="5-16位任意字符"/></div>
								<div class="input-text"><a style="font-size: 16px;">确认密码&nbsp;:</a><input name = " password1" type="password" style="width:300px;height:40px;margin-left: 14px;" placeholder="重复输入一遍密码"/></div>
								<input type="hidden" id="authcode" />
										<div class="input-text">
											<div class="input-text-left" >
											<a style="font-size: 16px;margin-left: 18px;">验证码&nbsp;:</a>
											</div>
											<div class="input-text-center" >
												<div class="left">
											<input type="text" style="width:300px;height:40px"/>
												</div>
												<div class="right" id="check_authcode">
													<div class="authcode_img">
													<b class="code1"></b>
													<b class="code2"></b>
													<b class="code3"></b>
													<b class="code4"></b>
												</div>
											</div>
											<!-- <div class="input-text-right" ></div> -->
								<p><a style="color:#d35620;margin-top:10px;">其余信息请注册后在个人中心填写 </a></p>			
									<input type="submit" value="注册" style="width:120px;height:40px;background-color:#3881f0 ;margin-left: 25px;color: white;font-size: 14px;"/>		
											</div>
											
										</div>
							</form>
						</div>
					</div>
					
						
   				</div>
   				
   				<div class="center-body-right">
   				<jsp:include page="../../WEB-INF/includes/body.left.inc.jsp"></jsp:include>
   				</div>
   			</div>
   			</div>
   			
   			
   			<div id="register-right"></div>
   </div>
    <div id="bottom">
   <jsp:include page="../../WEB-INF/includes/bottom.inc.jsp"></jsp:include>
   </div>
  </body>
</html>
